<template>
  <div class="container" style="height: 100%">
    <el-form class="query-form query-form-2" :model="formQuery" >
      <el-row>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker v-model="formQuery.firstDate" value-format="yyyy-MM-dd HH:mm:ss" type="date"
              placeholder="选择开始日期" >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker v-model="formQuery.endDate" value-format="yyyy-MM-dd HH:mm:ss" type="date"
              placeholder="选择结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select clearable v-model="formQuery.tenantType" placeholder="主体类型">
              <el-option value="0" label="个人"></el-option>
              <el-option value="1" label="企业"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select clearable v-model="formQuery.contractState" placeholder="合同状态">
              <el-option value="3" label="未审核"></el-option>
              <el-option value="0" label="待生效"></el-option>
              <el-option value="1" label="已生效"></el-option>
              <el-option value="2" label="已终止"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button @click="query">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item style="position: absolute; right: 0.2rem">
            <el-button type="primary" @click="$router.push('./edit')">新增</el-button>
            <el-button type="info" @click="deleteById">删除</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable v-model="formQuery.inputString" placeholder="租户姓名（名称）" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable v-model="formQuery.contactPhone" placeholder="联系电话（手机）" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable v-model="formQuery.contractNumber" placeholder="合同编号" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable v-model="formQuery.idcardNumber" placeholder="身份证号（营业执照编号）" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="div-table" style="padding:0 20px;">
        <el-scrollbar style="height:100%;">
            <el-table ref="table" class="roomTable"  :data="tableData" :row-class-name="tableRowClassName"
                    style="width: 100%">
                    <el-table-column type="selection" style="padding-left:14px;"></el-table-column>
                    <el-table-column prop="contractNumber" label="合同编号" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <router-link class="el-link el-link--primary"
                        :to="{path:`/contract/edit/${scope.row.pkContractId}`,query:{isdetail:'true'}}">
                        {{scope.row.contractNumber}}
                        </router-link>
                    </template>
                    </el-table-column>
                    <el-table-column prop="tenantType" label="承租人类型">
                    <template slot-scope="scope">
                        {{scope.row.tenantType | tenantTypeFilter}}
                    </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="tenantName" label="承租人"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="contactPhone" label="手机号"></el-table-column>
                    <el-table-column prop="buildingName" show-overflow-tooltip label="所在楼宇"></el-table-column>
                    <el-table-column prop="houseNumber" label="房间号"></el-table-column>
                    <el-table-column prop="roomMode" label="出租方式"></el-table-column>
                    <el-table-column prop="lessor" show-overflow-tooltip label="出租人"></el-table-column>
                    <el-table-column prop="contractState" show-overflow-tooltip label="合同状态">
                    <template slot-scope="{row}">
                        {{row.contractAuditState | contractAuditStateFilter(row.contractState,row.contractEndTime)}}
                    </template>
                    </el-table-column>
                    <el-table-column prop="contractStartTime" label="合同开始时间">
                    <template slot-scope="scope">
                        {{scope.row.contractStartTime | timeFormatFilter("yyyy-mm-dd")}}
                    </template>
                    </el-table-column>
                    <el-table-column prop="contractEndTime" label="合同结束时间">
                    <template slot-scope="scope">
                        {{scope.row.contractEndTime | timeFormatFilter("yyyy-mm-dd")}}
                    </template>
                    </el-table-column>
                    <el-table-column label="操作">
                    <template slot-scope="{row}">
                        <!-- 合同未审核(未审核通过 包含未审核 和 未通过) 才能编辑  -->
                        <template v-if="row.contractState===3">
                            <router-link class="el-link el-link--primary" :to="{path:`/contract/edit/`+row.pkContractId}">编辑
                            </router-link>
                            <el-link type="primary" :underline="false" @click="audit(1,row.pkContractId)">审核</el-link>
                        </template>
                        <!-- 合同通过才能退租 -->
                        <template v-else-if="row.contractState===1">
                            <el-link type="primary" :underline="false" @click="audit(0,row.pkContractId)">退租</el-link>
                        </template>
                    </template>
                    </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
    <div class="page-div-placeholder"></div>
    <div class="page-div" style="background: #fff">
      <el-pagination layout="prev, pager, next,jumper,sizes" :current-page="pageObj.page" :page-size="pageObj.pageSize"
        :total="pageObj.total" @current-change="currentPageChange" @size-change="sizeChange" :page-sizes='pageObj.pageSizes'></el-pagination>
    </div>
    <!-- 审核 退租 窗口 -->
    <el-dialog :show-close="false" class="contract-dialog" :destroy-on-close="true" v-if="contractEditWindow" :visible.sync="contractEditWindow">
      <edit-view @reLoad="loadData" :window="true" :state="windowState" :contract-id="contractId"></edit-view>
    </el-dialog>
  </div>
</template>

<script>
  import { listMixin } from "@/mixin";
  import editView from "@/view/operations/contract/edit";
  import {getOneAll,selectNameToId} from "@/api/common/common";
  import {
    getContract,
    deleteContract,
    getContractByCondition,
  } from "@/api/operations/contract/contract.js";
  export default {
    mixins:[listMixin],
    components: {
      editView,
    },
    computed: {
      contractEditWindow: {
        get: function () {
          return this.$store.state.Windows.contractEditWindow;
        },
        set: function (newVal) {
          this.$store.commit("changeWindow", {
            name: "contractEditWindow",
            val: newVal,
          });
        },
      },
    },
    data() {
      return {
        windowState: 0,
        //弹窗中的文件ID
        contractId: 0,
        formQuery: {},
        building: [],
        provinces: [],
        citys: [],
        areas: [],
        tableData: [],
        lessor: []
      };
    },
    methods: {
      loadData() {
        if (this.where) {
          return getContractByCondition(this.where).then((res) => {
            let { data, total } = res;
            this.pageObj.total = total;
            this.tableData = data;
          });
        } else {
          return getContract(this.pageObj).then((res) => {
            let { data, total } = res;
            this.pageObj.total = total;
            this.tableData = data;
          });
        }
      },
      deleteById() {
        let tableData = this.$refs["table"].selection;
        let contracts = "";
        tableData.forEach((v, i) => {
          contracts += v.pkContractId + ",";
        });
        if (!contracts) {
          this.$message.warning("请选择要删除的合同");
          return;
        }
        this.$confirm("是否删除该合同信息?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          deleteContract(contracts).then((res) => {
            if (res.code === 10000) {
              this.$message.success(res.msg);
              this.loadDataProxy();
            }
          });
        });
      },
      tableRowClassName(row, rowIndex) {
        row = row.row;
        if (row.contractState == "2") {
          return "warning-row";
        } else {
          return "";
        }
      },
      audit(state, id) {
        this.contractId = id;
        this.contractEditWindow = true;
        this.windowState = state;
      },
    },
    mounted() {
      this.loadDataProxy();
      getOneAll(selectNameToId("lessor")).then(res => {
        this.lessor = res.data;
      });
    }
  };
</script>
<style scoped>
    >>> .el-dialog__header {
        padding: 0;
    }
    >>> .el-dialog {
        height: 90%;
        width: 75%;
    }
    >>> .el-dialog__body {
        height: 100%;
    }

    >>> .el-dialog__wrapper {
        background-color: rgba(0, 0, 0, 0.4) ;
    }
    .v-modal{
        pointer-events:none;
        background:none;
    }

    >>> .el-dialog .el-form:not(.window-form) .el-form-item{
        margin-bottom:5px;
    }
    .div-table{
        height: calc(100% - 85px - 40px - 15px);
    }
</style>
